<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>属性选择器</title>
		<style>

			* {
				padding: 0;
				margin: 0;
			}
			
			/* 以该属性值开头的元素会被选中 */
			div[class^="box r"] {
				width: 200px;
				height: 200px;
				background-color: red;
			}
			
			/* 选中class的值以ud结尾的div元素 */
			div[class$="ud"] {
				width: 300px;
				height: 300px;
				background-color: yellow;
				border: 5px solid black;
			}
			
			/*
				选中class的值中有rotate值的元素
			*/
			[class~="rotate"] {
				transform: rotate(45deg);
			}

			[height] {
				height: 200px;
				background-color: black;
			}

		</style>
	</head>
	<body>

		<div class="box red border"></div>

		<div class="skyblue rotate cloud"></div>

		<div height="200px"></div>
		
	</body>
</html>